<!-- eslint-disable vue/valid-v-slot -->
<template>
  <div class="ele-body">
    <a-card :bordered="false">
      <!-- 搜索表单 -->
      <photo-search :where="defaultWhere" @search="reload" />
      <div>
        <a-space>
          <a-button type="primary" class="ele-btn-icon" @click="openEdit()">
            <template #icon>
              <plus-outlined />
            </template>
            <span>新建</span>
          </a-button>
        </a-space>
      </div>

      <a-row :gutter="16">
        <a-col
          v-for="(item, index) in data"
          :key="index"
          v-bind="
            styleResponsive
              ? { xl: 6, lg: 8, md: 12, sm: 12, xs: 24 }
              : { span: 6 }
          "
        >
          <a-card
            :bordered="true"
            hoverable
            style="margin-top: 16px"
            :body-style="'display: flex; flex-flow: row nowrap'"
          >
            <!-- <template #cover>
              <a-image
                :src="API_BASE_URL + 'img?name=' + item.cover"
                style="width: 100%; height: 23rem; padding: 0.5rem"
                :placeholder="true"
                :preview="false"
              />
            </template> -->
            <!-- <a-card-meta :title="item.name">
              <template #description>
                <div class="project-list-desc" :title="item.name"></div>
              </template>
            </a-card-meta> -->
            <div class="ele-cell" style="display: flex; flex-direction: row">
              <a-image
                width="6rem"
                height="6rem"
                :preview="false"
                :src="API_BASE_URL + 'img?name=' + item.coverThumbnail"
              />
            </div>
            <div
              class="ele-cell"
              style="
                display: flex;
                flex-flow: column nowrap;
                align-items: flex-start;
                margin-left: 0.5rem;
              "
            >
              <h6 class="ele-cell-content ele-elip">{{ item.name }}</h6>
              <div
                class="ele-cell-content ele-text-secondary"
                style="padding-left: 0"
              >
                {{ moment(item.createTime).format('YYYY-MM-DD HH:mm:ss') }}
              </div>
              <div> </div>
            </div>
            <template #actions>
              <a-tooltip title="添加内页" @click="openAddInside(item)">
                <plus-outlined />
              </a-tooltip>
              <a-tooltip title="编辑相册" @click="openEdit(item)">
                <edit-outlined />
              </a-tooltip>
              <a-tooltip title="删除相册">
                <a-popconfirm
                  placement="topRight"
                  title="确定要删除此相册吗？"
                  @confirm="deletePhoto(item)"
                >
                  <delete-outlined />
                </a-popconfirm>
              </a-tooltip>
              <a-tooltip title="相册预览" @click="openLink(item)">
                <link-outlined />
              </a-tooltip>
            </template>
          </a-card>
        </a-col>
      </a-row>
      <div class="ele-text-center" style="margin-top: 18px">
        <a-pagination
          :total="count"
          v-model:current="page"
          v-model:page-size="limit"
          @change="findDataList"
        />
      </div>
    </a-card>
    <!-- 编辑弹窗 -->
    <photo-edit
      v-model:visible="showEdit"
      :data="current"
      @done="findDataList"
    />
  </div>
</template>
<script lang="ts" setup>
  import { ref, reactive } from 'vue';
  import { message } from 'ant-design-vue/es';
  import { storeToRefs } from 'pinia';
  import { useThemeStore } from '@/store/modules/theme';
  import PhotoSearch from './compoments/photo-search.vue';
  import PhotoEdit from './compoments/photo-edit.vue';
  import { getAlbumList, updateAlbumStatus } from '@/api/photoAlbum';
  import type { Album, AlbumSearchParams } from '@/api/photoAlbum/model';
  import {
    EditOutlined,
    PlusOutlined,
    DeleteOutlined,
    LinkOutlined
  } from '@ant-design/icons-vue';
  import { API_BASE_URL } from '@/config/setting';
  import moment from 'moment';
  import 'moment/dist/locale/zh-cn';
  import router from '@/router';

  moment.locale('zh-cn');

  // 是否开启响应式布局
  const themeStore = useThemeStore();
  const { styleResponsive } = storeToRefs(themeStore);

  const data = ref<Album[]>();

  // 第几页
  const page = ref(1);

  // 每页多少条
  const limit = ref(8);

  // 总数量
  const count = ref(0);

  // // 当前选中数据
  const current = ref<Album | null>(null);

  // 是否显示编辑弹窗
  const showEdit = ref(false);

  // 默认搜索条件
  const defaultWhere = reactive<AlbumSearchParams>({
    name: '',
    status: true
  });

  /* 打开编辑弹窗 */
  const openEdit = (row?: Album) => {
    current.value = row ?? null;
    showEdit.value = true;
  };

  /* 跳转相册预览 */
  const openLink = (row?: Album) => {
    let tmpPath;
    if (row?.layout == 'HORIZONTAL') {
      tmpPath = {
        path: '/frontEndHAlbum',
        query: { id: row?.id, name: row?.name, isAdmin: 1 }
      };
    } else {
      tmpPath = {
        path: '/frontEndAlbum',
        query: { id: row?.id, name: row?.name, isAdmin: 1 }
      };
    }
    const { href } = router.resolve(tmpPath);
    window.open(href, '_blank'); //在新的tab页打开
  };

  const deletePhoto = (row?: Album) => {
    updateAlbumStatus(row?.id, row?.name, row?.cover, !row?.status)
      .then(() => {
        message.success('删除成功');
        findDataList();
      })
      .catch((e) => {
        message.error(e.message);
      });
  };
  //打开编辑页面
  const openAddInside = (row?: Album) => {
    const tmpPath = {
      path: '/albumPage',
      query: { id: row?.id, name: row?.name, layout: row?.layout }
    };
    router.push(tmpPath);
  };

  /* 搜索 */
  const reload = (params: AlbumSearchParams) => {
    defaultWhere.name = params.name;
    data.value = [];
    findDataList();
  };

  //查询相册列表
  const findDataList = () => {
    getAlbumList(defaultWhere).then((res) => {
      data.value = res.list;
    });
  };

  findDataList();
</script>
